<template>
	<div class="searchview allbgc">
		
		<!-- 修改触发的时机 改为@input="onInput"-->
		<van-search v-model="value" show-action :placeholder="hotWord" @search="onSearch" @cancel="$router.back()" @input="onInput"/>
		
		<div v-show="searchList.length" class="searchList">
			<van-cell :title="item.title" @click="searchListTap(item.title)" v-for="(item,index) in searchList" :key="index">
			</van-cell>
		</div>
		
		<div class="searchview-histroy">
			<van-cell title="搜索历史">
				<div>
					<span @click="clear">全部删除</span>
				</div>
			</van-cell>
			<van-cell :title="item" v-for="(item,index) in history" :key="index" :to="{path:'/searchList',query:{key_word:item}}">
				<van-icon name="close" size="14" style="padding-top: 2px;" @click="del()"/>
			</van-cell>
		</div>
			
			
			
	</div>
</template>

<script>
	import {search as searchApi} from '../../api/api.js'
	
	function debounce(fn,t=500){
		let timer = null;
		return function(...arg){
			clearTimeout(timer);//把已经存在的 计时器 给清掉
			timer = setTimeout(v=>{
				fn.apply(this,arg)
				// apply 用来改变this指向的
			},t)//重新计时
		}
	}
	
	export default {
		name:"SearchView",
		data() {
			return {
				value: '',//输入的内容
				hotWord:"嗨嗨嗨",//这个数据要 依赖于后端的接口
				searchList:[],
				history:[],//用来放历史记录
			}
		},
		created() {
			// 一进来 就要 判断 有没有历史记录
			let history=localStorage.getItem('history');//两种情况  1.第一次来 没搜索过没历史记录 是个undefined  2.搜索过 有记录 有数据
			if(history){
				this.history=JSON.parse(history) //用JSON.parse转化一下
			}
		},
		watch:{
			// 监控着value
			value(n){
				if(n.trim().length===0){
					this.searchList=[]
				}
				// encodeURIComponent()//把传过去的内容 进行encode转码
				// decodeURIComponent()//解码
			}
		},
		// 函数防抖   
		// 上一个字符的输入  到现在的字符的输入小于 设定的秒数 先不请求接口  大于设定的秒数 再请求
		// 类似于电梯 上来一个人等3s 3s内没别人进  电梯就关门 有人进来了  从新计时
		methods: {
			// function(e) 要做的事儿  作为一个参数 传到debounce里  所以要用debounce把function(e)包裹起来
			onInput:debounce(function(e){
				e=e.trim();// 去掉前后空格
				
				if(e.length===0) return//如果没有输入东西 或者只输入了空格 不操作
				
				// 搜索的内容 进行联想
				searchApi({
					key_word:e
				}).then(res=>{
					console.log(res);
					if(res.code==0){
						this.searchList=res.data
					}
				})
			}),
			onSearch(e) {
				e=e.trim();// 去掉前后空格
				e=e||this.hotWord; //给e添加一个默认值
				console.log(e);
				
				// 按enter键 搜索
				this.searchListTap(e)//复用一下searchListTap
			},
			searchListTap(title){
				// 重复搜索同一个 会产生多条相同的历史记录  所以再存之前 要先判断一下
				// findIndex查找  用title 去原来已经存的数组里去找 找到了就返回原来存过的相同值的索引  没找到会返回-1
				let index=this.history.findIndex(v=>v===title);//判断有没有重复的title
				if(index>=0){
					// index>=0 说明原来已经 存过了//所以要  把之前的相同历史记录删掉  重新存  在头部重新添加
					this.history.splice(index,1)// 把之前的历史记录删掉 
				}
				// 在头部重新添加this.history.unshift(title);
				this.history.unshift(title);//点击联想出来的 内容 点击以后 历史搜索里 会多一条记录
				
				// 在本地内存中间会多一个记录  在localStorage里会多一个记录
				localStorage.setItem('history',JSON.stringify(this.history))
				this.$router.push({path:'/searchList',query:{key_word:title}})
				
			},
			// 删除某个 历史记录
			del(index){
				this.history.splice(index,1)
				localStorage.setItem('history',JSON.stringify(this.history))
			},
			// 清除所有 历史记录
			clear(){
				this.history=[]
				localStorage.setItem('history',JSON.stringify(this.history))
			}
		}
	};
</script>

<style lang="less">
	.searchList{
		position: fixed;
		left: 0;
		right: 0;
		top: 54px;
		bottom: 0;
		overflow-y: auto;
		z-index: 999;
		background-color: #efefef;
	}
	.searchview-del {
		display: flex;
		justify-content: space-between;
		padding: 14px;
		font-size: 14px;
		
	}

	.searchview-del em {
		font-style: normal;
	}

	.searchview-histroy {
		background-color: #fff;
	}

	.searchview-histroy li {
		list-style: none;
		display: flex;
		justify-content: space-between;
		margin: 0 14px;
		padding: 14px 0;
		border-top: 1px solid #efefef;
	}
</style>